<template>
  <view
    class="cinema-container"
    :style="{ paddingBottom: `${tabbarHeight}px` }"
  >
    <CinemaSearchInput @onSearch="onSearch"></CinemaSearchInput>
    <CinemaSearchFilter @onRegionChanged="onRegionChanged"></CinemaSearchFilter>
    <customTabBar ref="tabbar"></customTabBar>
    <div class="list-container" :style="{ height: `${listContainerHeight}px` }">
      <template v-if="listContainerHeight && listContainerHeight > 0">
        <scroll-view
          v-if="list.length > 0"
          :scroll-y="true"
          :style="{ height: `${listContainerHeight}px` }"
          :scroll-top="scrollTop"
          @ScrollToLower="onScrollBottom"
          :pagingEnabled="true"
          :enhanced="true"
          :trapScroll="true"
          :enablePassive="true"
        >
          <div
            class="list-item-container"
            v-for="(item, index) in list"
            :key="index"
          >
            <CinemaItem :info="item" @click="onClickItem(item)"></CinemaItem>
          </div>
          <Loading
            :page="pageInfo.current_page"
            :total="pageInfo.last_page"
            :loadingFlag="loadingFlag"
            :tipFlag="tipFlag"
          ></Loading>
          <div style="height: 5px"></div>
        </scroll-view>
        <!-- 空状态 -->
        <template v-if="list.length === 0 && !loading">
          <nut-empty description="无数据"></nut-empty>
        </template>
        <!-- 加载状态 -->
        <template v-if="list.length === 0 && loading">
          <nut-skeleton
            :style="{ width: '100%', margin: '0.5rem 0' }"
            width="100%"
            height="15px"
            title
            animated
            avatar
            avatarSize="60px"
            :avatarShape="'square'"
            row="3"
          >
          </nut-skeleton>
          <nut-skeleton
            :style="{ width: '100%', margin: '0.5rem 0' }"
            width="100%"
            height="15px"
            title
            animated
            avatar
            avatarSize="60px"
            :avatarShape="'square'"
            row="3"
          >
          </nut-skeleton>
          <nut-skeleton
            :style="{ width: '100%', margin: '0.5rem 0' }"
            width="100%"
            height="15px"
            title
            animated
            avatar
            avatarSize="60px"
            :avatarShape="'square'"
            row="3"
          >
          </nut-skeleton>
          <nut-skeleton
            :style="{ width: '100%', margin: '0.5rem 0' }"
            width="100%"
            height="15px"
            title
            animated
            avatar
            avatarSize="60px"
            :avatarShape="'square'"
            row="3"
          >
          </nut-skeleton>
          <nut-skeleton
            :style="{ width: '100%', margin: '0.5rem 0' }"
            width="100%"
            height="15px"
            title
            animated
            avatar
            avatarSize="60px"
            :avatarShape="'square'"
            row="3"
          >
          </nut-skeleton>
          <nut-skeleton
            :style="{ width: '100%', margin: '0.5rem 0' }"
            width="100%"
            height="15px"
            title
            animated
            avatar
            avatarSize="60px"
            :avatarShape="'square'"
            row="3"
          >
          </nut-skeleton>
          <nut-skeleton
            :style="{ width: '100%', margin: '0.5rem 0' }"
            width="100%"
            height="15px"
            title
            animated
            avatar
            avatarSize="60px"
            :avatarShape="'square'"
            row="3"
          >
          </nut-skeleton>
        </template>
      </template>
    </div>
  </view>
</template>

<script lang="ts">
import { needLocation } from "../../utils/needLocationHook";
export default {
  name: "Cinema",
  mixins: [needLocation],
};
</script>
<script setup lang="ts">
import Taro, { useDidShow, useShareAppMessage } from "@tarojs/taro";
import { ref, onMounted, reactive, watch } from "vue";
import customTabBar from "../../components/custom-tab-bar/customTabBar.vue";
import CinemaItem from "../../components/cinema/item.vue";
import CinemaSearchInput from "../../components/cinema-search-input/index.vue";
import CinemaSearchFilter from "../../components/cinema-search-filter/index.vue";
import Loading from "../../components/Loading/index.vue";
import { useTabbarStore, useLocationStore } from "../../store";
import { storeToRefs } from "pinia";
import * as cinemaApi from "../../api/cinema";
const tabbarStore = useTabbarStore();
const locationStore = useLocationStore();
const { tabbarHeight } = storeToRefs(tabbarStore);
const { selectCityinfo } = storeToRefs(locationStore);

const onClickItem = (data) => {
  const { cinemaid, down_price } = data;
  if (down_price === "0.00") {
    return false;
  }
  Taro.navigateTo({
    url: `/pages/cinema-detail/index?cinema_id=${cinemaid}`,
  });
};
useShareAppMessage(() => {
  return {
    title: "影橙电影票",
    page: "/pages/home/index",
    imageUrl: "",
  };
});
onMounted(() => {
  Taro.showShareMenu({
    withShareTicket: true,
    menus: ["share"],
  });
});

const list: any = ref([]);
const loading = ref(false);
const listContainerHeight = ref(null);
const loadingFlag = ref(false);
const timer = ref(null);
const scrollTop = ref(0);
const tipFlag = ref(false); // "数据过多 提示文字一开始让他隐藏 当数据getData() 回来以后 在变成true 使用loading 组件 需要传递这个值"
let pageInfo = reactive({
  current_page: 1,
  page_size: 10,
  total: 0,
  last_page: 0,
});
const filterInfo = reactive({
  area_id: null,
  searchValue: null,
});
//滚动分页处理函数 status 状态 1:分页 0:筛选
const onScrollBottom = (e) => {
  console.log(e);

  // return;
  loadingFlag.value = true;
  console.log("onReachBottom");
  if (timer.value) {
    clearTimeout(timer.value);
  }
  timer.value = setTimeout(() => {
    if (pageInfo.current_page <= pageInfo.last_page) {
      pageInfo.current_page++;
      getData(pageInfo.current_page, pageInfo.page_size, 1);
    } else {
      Taro.showToast({
        title: "没有更多数据了呢",
        icon: "none",
      });
    }
  }, 1000);
};

onMounted(() => {
  getData(pageInfo.current_page, pageInfo.page_size, 1);
});
const onSearch = (value) => {
  filterInfo.searchValue = value;
};
const onRegionChanged = (value) => {
  if (value === 0) {
    filterInfo.area_id = null;
  } else {
    filterInfo.area_id = value;
  }
};
// 监听筛选信息变化
watch(filterInfo, () => {
  pageInfo.current_page = 1;
  pageInfo.page_size = 10;
  pageInfo.total = 0;
  pageInfo.last_page = 0;

  getData(pageInfo.current_page, pageInfo.page_size, 0);
});
// 监听选择城市变化
watch(
  () => locationStore.selectCityinfo,
  () => {
    pageInfo.current_page = 1;
    pageInfo.page_size = 10;
    pageInfo.total = 0;
    pageInfo.last_page = 0;

    getData(pageInfo.current_page, pageInfo.page_size, 0);
  }
);

const getData = async (current_page, page_size, status) => {
  loading.value = true;
  const { cityId } = selectCityinfo.value;
  const data = {
    city_id: cityId,
    page_size: page_size,
    current_page: current_page,
    area_id: filterInfo.area_id,
    latitude: locationStore.latitude,
    longitude: locationStore.longitude,
    keyword: filterInfo.searchValue,
  };
  const res: any = await cinemaApi.list(data);
  console.log(res, "获取数据");
  pageInfo.total = res.total;
  pageInfo.last_page = res.last_page;
  // list.value = res.data;
  tipFlag.value = true;

  if (status) {
    list.value = [...list.value, ...res.data];
    loading.value = false;
    loadingFlag.value = false;
  } else {
    list.value = [];
    list.value = res.data;
  }

  // list.value = res.data;
  // loading.value = false;
};

useDidShow(() => {
  setTimeout(() => {
    getListContainerHeight();
  }, 500);
});
const getListContainerHeight = () => {
  const query = Taro.createSelectorQuery()
    .select(".list-container")
    .boundingClientRect();
  query.selectViewport();
  query.exec(function (res) {
    if (res[0]) {
      listContainerHeight.value = res[0].height;
    }
  });
};
</script>

<style lang="scss">
.cinema-container {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  .list-container {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .list-item-container {
    padding: 0 0.5rem 0.5rem 0.5rem;
  }
  .list-item-container:first-of-type {
    padding-top: 0.5rem;
  }
  .list-item-container:last-of-type {
    padding-bottom: 0.5rem;
  }
}
</style>
